<template>
    <div style="margin-bottom: 20px;">
        <el-card style="width: 400px;" shadow="never">
            <div class="card">
                <el-image style="height: 80px;" :src="props.data?.img_url_arr[0]" fit="cover" />
                <div class="box">
                    <div class="info">

                        <div class="text" @click="toPage">{{ props.title }}</div>
                        <div style="display: flex">
                            <div style="margin-right: 15px">
                                <div class="sku">
                                    <span class="sku_type">{{ props.value_one_title }}:</span>
                                    <span class="sku_name"> {{ props.value_one }}</span>
                                </div>

                                <div class="sku">
                                    <span class="sku_type">{{ props.value_two_title }}:</span>
                                    <span class="sku_name"> {{ props.value_two }}</span>
                                </div>
                                <div class="sku">
                                    <span class="sku_type">{{ props.value_three_title }}:</span>
                                    <span class="sku_name"> {{ props.value_three }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="fn">
                        <div class="price">￥ {{ props.data.price }}</div>
                        <div class="btn">
                            <el-button type="primary" size="small"
                                :disabled="props.data?._id === props.addAssStore_index" @click="addCom">配置</el-button>
                        </div>

                        <div class="btn">
                            <el-button
                                :disabled="props.data?._id == comAssStore.compareIndex[0] || props.data?._id == comAssStore.compareIndex[1]"
                                @click="Compare" type="primary" size="small">对比</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { useTabStore } from '@/store/useTabStore';
import { useAddAssStore } from '@/store/useAddAssStore';
import { useComAssStore } from '@/store/useComAssStore';
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const addAssStore = useAddAssStore();
const comAssStore = useComAssStore();
const tabStore = useTabStore();
const props = defineProps({
    title: String,
    value_one_title: String,
    value_one: String,
    value_two_title: String,
    value_two: String,
    value_three_title: String,
    value_three: String,
    data: {} as any,
    index: Number,
    addAssStore_index: String
})

const addCom = () => {
    const typeHandlers = {
        "CPU": addAssStore.setCpuInfo,
        "GPU": addAssStore.setGpuInfo,
        "主板": addAssStore.setMainboardInfo,
        "内存": addAssStore.setMemoryInfo,
        "固态硬盘": addAssStore.setSsdInfo,
        "硬盘": addAssStore.setHddInfo
    };
    const handler = typeHandlers[tabStore.assembly_type];
    if (handler) {
        handler(props.data, props.data?._id);
        addAssStore.setTotal();
        addAssStore.setScore();
    }
};

const Compare = () => {
    comAssStore.setCompareList(props.data);
    comAssStore.setCompareIndex(props.data?._id);
}

const toPage = () => {
    router.push({
        name: 'Info',
        query: {
            type: tabStore.assembly_type,
            id: props.data?._id,
        }
    })
}

</script>

<style scoped lang="scss">
.card {
    display: flex;
    padding: 5px;
    align-items: center;
    .el-image {
        border: 1px solid #b9b9b9;
    }


    .box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-left: 10px;
    }


    .info {
        margin-left: 10px;



        .text {
            max-width: 200px;
            font-weight: 600;
            margin-bottom: 5px;
            cursor: pointer;
            //换行
            white-space: nowrap;
            /* 禁止文本换行 */
            overflow: hidden;
            /* 隐藏溢出部分的文本 */
            text-overflow: ellipsis;
            /* 显示省略号 */

        }

        .text:hover {
            color: #005cff;
        }

        .sku {
            margin-top: 5px;

            .sku_type {
                font-size: 12px;
                // color: rgb(107, 107, 107);
                font-weight: 600;
            }

            .sku_name {
                font-size: 12px;
                font-weight: 600;
                margin-left: 5px;
            }
        }
    }

    .fn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .price {
            font-size: 16px;
            font-weight: bold;
            color: red;
        }
    }
}
</style>